<template>
  <CardDialog v-model:visible="show" width="400px" title="归档配置">
    <div class="form-content">
      <a-form class="dialog-form" ref="formRef" :model="form" :rules="rules" :label-col="{ span: 7 }">
        <a-form-item label="图片清理日期" name="resultClearDay">
          <a-input style="width: 100%" v-model:value="form.resultClearDay" addon-after="天" placeholder="请输入图片清理日期" />
        </a-form-item>
        <a-form-item label="视频清理日期" name="videoClearDay">
          <a-input style="width: 100%" v-model:value="form.videoClearDay" addon-after="天" placeholder="请输入视频清理日期" />
        </a-form-item>
        <a-form-item label="音频清理日期" name="messageClearDay">
          <a-input style="width: 100%" v-model:value="form.messageClearDay" addon-after="天" placeholder="请输入音频清理日期" />
        </a-form-item>
      </a-form>
    </div>
    <div class="button-list">
      <a-button class="form-button" type="primary" @click="onSubmit">保存</a-button>
      <a-button class="form-button form-button-cancel" type="primary" @click="onClose">取消</a-button>
    </div>
  </CardDialog>
</template>
<script setup>
  import { ref, reactive } from 'vue';
  import CardDialog from '/@/components/cardDialog/index.vue';
  import { api } from '/@/api/plat/archives-config.js';
  import { message } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { smartSentry } from '/@/lib/smart-sentry';

  let show = ref(false);
  const formRef = ref();
  const formDefault = {
    resultClearDay: undefined,
    videoClearDay: undefined,
    messageClearDay: undefined,
  };
  const rules = {
    resultClearDay: [{ required: true, message: '请填写图片清理日期' }],
    videoClearDay: [{ required: true, message: '请填写视频清理日期' }],
    messageClearDay: [{ required: true, message: '请填写音频清理日期' }],
  };
  let form = reactive({ ...formDefault });

  function onload() {
    api.queryData().then(({ data }) => {
      Object.assign(form, data);
    });
  }

  function open() {
    show.value = true;
    onload();
  }

  function onClose() {
    Object.assign(form, formDefault);
    show.value = false;
  }

  async function onSubmit() {
    try {
      await formRef.value.validateFields();
      save(form);
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  // 新建、编辑API
  async function save(formData) {
    SmartLoading.show();
    try {
      await api.update(formData);
      message.success('操作成功');
      onClose();
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  defineExpose({
    open,
  });
</script>

<style lang="less" scoped>
  @import '/@/assets/style/form.less';
  &:deep .ant-input-group-addon {
    color: #fff;
  }
  .button-list {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .form-button {
      margin: 0 10px;
    }
    .form-button-cancel {
      background-color: #ccc;
      color: #000;
      &:hover {
        background-color: #eee;
      }
    }
  }
</style>
